<template>
  <div style="padding: 10px;background-color: #fafafa">
    <!--标题-->
    <div style="margin: 10px 0">
      <div><h3 style="text-align: center">任务详情</h3></div>
    </div>
    <br>
    <!-- 页面内容 -->
    <div>
      <!--  组别  -->
      <div style="padding-left: 20px">
        <span style=";height: 40px;font-size: 20px;" >
          任务组别：
          <span style="color: #5b5959">
            <el-input v-model="tasks.group" style="width: 15%;font-size: 18px" size="large"/>
          </span>
        </span>
        <span style=";height: 40px;font-size: 20px;float: right;padding-right: 30px" >
          详细分组：
          <span style="color: #5b5959">
            <el-input v-model="tasks.group_detail" style="width: 120px;font-size: 18px" size="large"/>
          </span>
        </span>
      </div>
      <br>
      <!--  简介  -->
      <div style="padding-left: 20px">
        <span  style="height: 40px;font-size: 20px" >任务简介：</span>
        <span  style=";height:40px;font-size:18px;float:right;padding-right:30px;color: #5b5959;" >
          <el-icon><Timer /></el-icon>
          <el-input v-model="tasks.year_week" style="width: 120px;font-size: 14px" size="large"/>
        </span>
        <el-input type="textarea" v-model="tasks.task_introduction" style=";font-size: 20px;padding:10px" size="large"/>
      </div>
      <!--  内容  -->
      <div>
        <span style="height: 40px;font-size: 20px;padding-left: 20px" >任务内容：</span>
        <div style="font-size: 20px;padding-top: 20px">
          <div id="editor—wrapper">
            <!--            工具栏-->
            <div id="toolbar-container"></div>
            <!--            编辑框-->
            <div id="editor-container" style="height: 100%"></div>
          </div>
        </div>
      </div>
      <!-- 操作 -->
      <div style="padding: 20px;float: right">
          <span>
            <el-popconfirm title="确定删除吗？" @confirm="task_delete(tasks.id)">
            <template #reference>
              <el-button style="margin-right: 20px" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
            <el-button style="margin-right: 20px" @click="to_task">返 回</el-button>
            <el-button type="primary" @click="task_update">保 存</el-button>
          </span>
      </div>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import {Timer,Promotion} from '@element-plus/icons'
import '@wangeditor/editor/dist/css/style.css';
import { createEditor, createToolbar } from '@wangeditor/editor'

let editor = null;
export default {
  name: "TaskView",
  components: {
    Timer,
    Promotion,
  },
  data() {
    return{
      tasks:{},
      a:0,
    }
  },
  created() { //页面加载 调用
    this.load()
  },
  methods:{
    // 删除 指定id的任务
    task_delete(id) {
      request.delete("/task/delete/"+id).then(res => {
        if (res.code == "200") {
          ElMessage({
            message: '删除成功.',
            type: 'success',
          })
          this.$router.push({path:"/task"})
        } else {
          ElMessage.error('删除失败.')
        }
      })
    },
    // 返回任务总览页面 1
    to_task() {
      this.$router.push({path:"/task"})
    },
    // 修改具体任务类容 1
    task_update() {
      this.tasks.task_content = editor.getHtml();
      request.patch("/task/update", this.tasks).then(res => {
        if (res.code == 200) {
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
        } else {
          ElMessage.error('修改失败'+res.msg)
        }
        this.load()
      })
    },
    // 获取 数据 1
    load() {
      request.get("/task/task_data_byId",{
        params:{
          url:"/task",
          // 获取 任务id
          id:this.$route.path.substring(6)
        }
      }).then(res => {
        if (res.code == "400") {
          ElMessage.warning('暂无数据')
        }else if (res.code == "200") {
          this.tasks = res.data
          // 避免编辑器重复出现
          if (editor == null) {
            this.editor_create(this.tasks.task_content)
          }else {
            editor.destroy()
            this.editor_create(this.tasks.task_content)
          }
        }
        else {
          ElMessage.error('查询失败：'+res.msg)
        }
      })
    },
    // 创建富文本编辑器 1
    editor_create( content ) {
      this.$nextTick(()=> { //执行延迟回调 ,避免异步找不到dom
        const editorConfig = {
          placeholder: '输入内容',
          // 上传本地图片配置
          MENU_CONF: {
            uploadImage: {
              fieldName: "file",
              server: "http://"+window.server.filesUploadUrl+":8081/files/editor/upload",
              // server: 'http://localhost:8081/files/editor/upload',
            },
            uploadVideo: {
              fieldName: "file",
              server: "8081/files/editor/uploadVideo",
              maxFileSize: 500 * 1024 * 1024, // 500M
              // 上传之前触发
              onBeforeUpload(file) {
                ElMessage({
                  message: '该功能未推出，敬请期待！',
                  type: 'info',
                })
                return false
              },
            }
          }
        }
        // 创建编辑器
        editor = createEditor({
          selector: '#editor-container',
          config: editorConfig,
        })
        editor.setHtml( content )
        // 创建工具栏
        const toolbar = createToolbar({
          editor,
          selector: '#toolbar-container'
        })
      })
    },
  }
}
</script>

<style scoped>

</style>